<template>
  <div class="m-order">
    <ul>
      <li v-if="orderList.length">
        <el-row v-for="(item, idx) in orderList" :key="idx">
          <el-col :span="4">
            <img :src="'data:image/png;base64,'+item.shopInfo.logoImg" />
          </el-col>
          <el-col :span="10">
            <h4>{{ item.shopInfo.shopName }}</h4>
            <p>数量: {{ item.foodInfo }}</p>
          </el-col>
          <el-col :span="4">总价: ￥ {{ item.total }}</el-col>
          <el-col v-if="item.status == 1" :span="6">
            <el-button @click="checkPay(idx)" type="danger">付款</el-button>
          </el-col>
          <el-col v-if="item.status == 2" :span="6">
            <el-button @click="ifReceiveFun(idx)" type="warning">收货</el-button>
          </el-col>
          <el-col v-if="item.status == 3" :span="6">
            <el-button @click="ifCommentFun(idx)" type="success">评价</el-button>
          </el-col>
          <el-col v-if="item.status == 4" :span="6">
            <span>已完成</span>
          </el-col>
        </el-row>
      </li>
      <li v-else class="empty">没有订单</li>
    </ul>

    <el-dialog title="请确认配送信息" :visible.sync="edit" width="30%" center>
      <el-card class="box-card">
        <span>手机号码：</span>
        <el-input v-model="user.telephone" style="width:300px"></el-input>
      </el-card>
      <el-card class="box-card">
        <span>配送地址：</span>
        <el-input v-model="user.address" style="width:300px"></el-input>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderPay()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="ifReceive" width="30%" center>
      <span>您确定要收货吗？请确保您已经收到餐品</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="receive">确定</el-button>
        <el-button @click="ifReceive = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请点评" :visible.sync="ifComment" width="40%" center>
      <el-form :model="comment" ref="comment" label-width="100px" class="demo-ruleForm">
        <el-form-item label="评分" prop="score">
          <el-rate v-model="comment.score" show-text></el-rate>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :rows="5" v-model="comment.content" placeholder="默认好评"></el-input>
        </el-form-item>
        <el-form-item label="上传图片(可选)" prop="img">
          <el-upload
            class="avatar-uploader"
            action="api/user/upload/img"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-image v-if="imgUrl" :src="imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commentPingjia()">确定</el-button>
        <el-button @click="ifComment = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as homeApi from "@/server/home.js";
export default {
  props: ["orderList", "user", "pay"],
  data() {
    return {
      ifReceive: false,
      ifComment: false,
      orderId: 0,
      u: null,
      edit: false,
      value: null,
      imgUrl: "",
      comment: {
        orderId: 0,
        userId: 0,
        score: 5,
        content: "",
        img: "",
        foodIds: null,
        shopId: 0
      },
      alipay: {
        out_trade_no: "",
        total_amount: "",
        subject: "",
        body: ""
      }
    };
  },
  methods: {
    update: function() {
      this.u = this.user;
      homeApi.editUser(this.u).then(result => {
        if (result.data.code == 200) {
          this.u = result.data.data;
          this.edit = false;
        }
      });
    },
    checkPay: function(index) {
      var orderId = this.orderList[index].orderId;
      var userId = localStorage.getItem("user");
      this.alipay.out_trade_no = this.orderList[index].orderId;
      this.alipay.total_amount = this.orderList[index].total;
      this.alipay.subject = this.orderList[index].foodInfo;
      this.alipay.body = this.orderList[index].foodInfo;
      this.edit = true;
    },

    orderPay: function() {
      homeApi.orderPay(this.alipay).then(res => {
        this.edit = false;
        let dwSafari;
        dwSafari = window.open();
        dwSafari.document.open();
        let dataObj = res.data;
        let html = dataObj.replace(/[^\u0000-\u00FF]/g, function($0) {
          return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;");
        });
        dwSafari.document.write(
          "<html><head><title></title><meta charset='utf-8'><body>" +
            dataObj +
            "</body></html>"
        );
        dwSafari.document.forms[0].submit();
        dwSafari.document.close();
      });
    },

    receive: function() {
      homeApi.receive(this.orderId).then(res => {
        if (res.data.code == 200) {
          this.ifReceive = false;
          this.$message({
            type: "success",
            message: "操作成功"
          });
          location.reload();
        }
      });
    },
    commentPingjia: function() {
      this.comment.orderId = this.orderId;
      this.comment.userId = localStorage.getItem("user");
      homeApi.comment(this.comment).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "评价成功"
          });
          location.reload();
        }
      });
    },
    ifReceiveFun: function(idx) {
      this.orderId = this.orderList[idx].orderId;
      this.ifReceive = true;
    },
    ifCommentFun: function(idx) {
      this.orderId = this.orderList[idx].orderId;
      this.comment.foodIds = this.orderList[idx].foodIds;
      this.comment.shopId = this.orderList[idx].shopInfo.shopId;
      this.ifComment = true;
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res == "null") {
        this.$message({
          type: "error",
          message: "上传失败!"
        });
        return;
      }
      this.imgUrl = "/api/user/image/get/" + res;
      this.comment.img = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
    
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>
